<!-- 业务功能管理 -->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-date"></i> App管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="addDialog">添加</el-button>
                <el-button type="primary"
                           icon="delete"
                           class="handle-del mr10"
                           @click="batchDeleteApp">批量删除</el-button>
                <el-button class="handSearchBut"
                           type="primary"
                           icon="search"
                           @click="searchApp">搜索</el-button>
                <el-input v-model="select_word"
                          placeholder="筛选关键词"
                          class="handle-input mr10"
                          @keyup.enter.native="searchApp"></el-input>
            </div>
            <div class="app-list">
                <el-table :data="appList"
                          border
                          @select-all="selectAppFn"
                          @select="selectAppFn">
                    <el-table-column type="selection"
                                     width="35"></el-table-column>
                    <el-table-column prop="id"
                                     label="AppID"
                                     align='center'></el-table-column>
                    <el-table-column prop="appName"
                                     label="App名称"
                                     align='center'></el-table-column>
                    <el-table-column prop="appVersion"
                                     label="APP当前版本号"
                                     align='center'></el-table-column>
                    <el-table-column prop="appLogInfo"
                                     label="APP版本更新日志信息"
                                     align='center'></el-table-column>
                    <el-table-column prop="updateFlag"
                                     label="是否强制升级"
                                     align='center'
                                     :formatter="flagFormatter"></el-table-column>
                    <el-table-column prop="downloadUrl"
                                     label="下载地址"
                                     align='center'></el-table-column>
                    <el-table-column prop="qrCode"
                                     label="二维码下载图片地址"
                                     align='center'></el-table-column>
                    <el-table-column prop="appSize"
                                     label="APP文件大小"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="bussTypeId"
                                     label="APP类型"
                                     align='center'
                                     :formatter='bussTypeFormatter'></el-table-column>
                    <el-table-column prop="appIcon"
                                     label="APP图标"
                                     align='center'>
                        <template slot-scope="scope">
                            <img :src="scope.row.appIcon"
                                 alt=""
                                 style="max-width:50px;max-height:50px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="appFuncImage"
                                     label="app主要功能截图"
                                     align='center'>
                        <template slot-scope="scope"
                                  v-if="scope.row.appFuncImage">
                            <span v-for="(item , index) in scope.row.appFuncImage.split(',')"
                                  v-bind:key="index">
                                <img :src="item"
                                     alt=""
                                     style="max-width:50px;height:50px;margin-left:5px;">
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appUpdate"
                                     label="APP上传日期"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="model"
                                     label="功能列表"
                                     align='center'>
                        <template slot-scope="scope">
                            <div class="tabtdHover"
                                 title="点击添加功能"
                                 @click="addOrDeletFn(scope.row.id,scope.row.appName,'add');showCompBtn = false">添加功能</div>
                            <div class="tabtdHover"
                                 title="点击查看已有功能"
                                 @click="addOrDeletFn(scope.row.id,scope.row.appName,'delete');showCompBtn = false">已有功能</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="company"
                                     label="使用企业列表"
                                     align='center'>
                        <template slot-scope="scope">
                            <div class="tabtdHover"
                                 title="企业列表选择"
                                 @click="toPageCompanyList(scope.row.id,scope.row.appName,'add');showCompBtn = false">添加企业</div>
                            <div class="tabtdHover"
                                 title="企业使用列表"
                                 @click="toPageCompanyList(scope.row.id,scope.row.appName,'delete');showCompBtn = true">已有企业</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appInfo"
                                     label="APP说明"
                                     align='center'></el-table-column>
                    <el-table-column prop="appUrl"
                                     label="APP 平台接口路径URL"
                                     align='center'></el-table-column>
                    <el-table-column label="操作"
                                     width="180"
                                     align='center'>
                        <template slot-scope="scope">
                            <el-button size="small"
                                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small"
                                       type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="appTotal">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle"
                   :visible.sync="editVisible"
                   @closed="closeAppDialog"
                   width="90%">
            <el-form ref="form"
                     :rules="rules"
                     :model="form"
                     label-width="160px">
                <!-- <el-form-item label="AppID"
                              v-if="inputDisabled">
                    <el-input v-model="form.id"
                              :disabled="inputDisabled"></el-input>
                </el-form-item> -->
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="App名称"
                                      prop="appName">
                            <el-input v-model="form.appName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="APP当前版本号">
                            <el-input v-model="form.appVersion"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="版本更新日志信息">
                            <el-input v-model="form.appLogInfo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否显示强制升级标志">
                            <el-select v-model="form.updateFlag"
                                       placeholder="请选择"
                                       style="width:100%;">
                                <el-option label="否"
                                           value="0"></el-option>
                                <el-option label="是"
                                           value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="下载地址">
                            <el-input v-model="form.downloadUrl"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="二维码下载图片地址">
                            <el-input v-model="form.qrCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="APP文件大小"
                                      prop="appSize">
                            <el-input v-model.number="form.appSize"
                                      placeholder="APP大小单位为M"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="APP上传日期"
                                      v-if="inputDisabled">
                            <el-input v-model="form.appUpdate"
                                      :disabled="inputDisabled"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="APP类型">
                            <el-select v-model="form.bussTypeId"
                                       placeholder="选择类型"
                                       style="width:100%;">
                                <el-option label="教育"
                                           :value="0"></el-option>
                                <el-option label="管理"
                                           :value="1"></el-option>
                                <el-option label="知识"
                                           :value="2"></el-option>
                                <el-option label="其他"
                                           :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="平台接口路径URL">
                            <el-input v-model="form.appUrl"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="APP说明">
                            <el-input type="textarea"
                                      rows="3"
                                      v-model="form.appInfo"
                                      style="width:100%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="funcImg">
                    <el-form-item label="APP图标">
                        <el-upload class="upload-demo"
                                   :action="urlConfig.upload"
                                   :on-exceed="handleexceed"
                                   :file-list="fileList"
                                   :on-success="hanleSuccess"
                                   :on-remove="hanleRemove"
                                   accept="image/jpg,image/gif,image/png"
                                   :limit='1'
                                   list-type="picture">
                            <el-button size="small"
                                       type="primary">点击上传</el-button>
                            <div slot="tip"
                                 class="el-upload__tip">只能上传jpg/gif/png文件</div>
                        </el-upload>
                    </el-form-item>
                </div>
                <div class="funcImg">
                    <el-form-item label="主要功能截图">
                        <el-upload :action="urlConfig.upload"
                                   :on-exceed="funcHandleexceed"
                                   :file-list="funcFileList"
                                   :on-success="funcHanleSuccess"
                                   :on-remove="funcHanleRemove"
                                   accept="image/jpg,image/gif,image/png"
                                   :limit='5'
                                   list-type="picture">
                            <el-button size="small"
                                       type="primary">点击上传</el-button>
                            <div slot="tip"
                                 class="el-upload__tip">只能上传jpg/gif/png文件</div>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="editVisible = false; fileList = [] ;funcFileList = []">取 消</el-button>
                <el-button type="primary"
                           @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 功能列表选择 -->
        <el-dialog :title="funPageObj.setFnText.substr(0,funPageObj.setFnText.length-6)"
                   :visible.sync="funVisible"
                   @closed="closeFunVisible"
                   width="90%">
            <div class="container">
                <div class="handle-box">
                    <el-button type="primary"
                               icon="delete"
                               class="handle-del mr10"
                               @click="insertOrDeleteFunc()">{{funPageObj.setFnText.substr(funPageObj.setFnText.length-4)}}</el-button>
                    <el-button class="handSearchBut ml10"
                               type="primary"
                               icon="search"
                               @click="searchFn">搜索</el-button>
                    <el-input v-model="funPageObj.select_word"
                              placeholder="请输入名称或别名"
                              class="handle-input mr10"
                              @keyup.enter.native="searchFn"></el-input>
                </div>
                <el-table ref="multipleTable"
                          :data="funPageObj.funList"
                          border
                          @select-all="selectFuncFn"
                          @select="selectFuncFn"
                          v-if="showCompBtn&&funPageObj.addOrDelet == 'delete'"
                          key="table1">
                    <el-table-column type="selection"
                                     align='center'></el-table-column>
                    <el-table-column prop="id"
                                     label="功能ID"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="functionsInfo.name"
                                     label="功能名称"
                                     align='center'></el-table-column>
                    <el-table-column prop="functionsInfo.funcInfo"
                                     label="功能描述"
                                     align='center'></el-table-column>
                    <el-table-column prop="functionsInfo.funcType"
                                     label="功能模块类型"
                                     align='center' :formatter='funcFormatter'></el-table-column>
                    <el-table-column prop="nickname"
                                     label="功能别名"
                                     align='center'></el-table-column>
                    <el-table-column prop="flag"
                                     label="是否显示标志"
                                     align='center'
                                     :formatter='flagFormatter'></el-table-column>
                    <el-table-column prop="url"
                                     label="接口路径url"
                                     align='center'></el-table-column>
                    <el-table-column prop="funcIcon"
                                     label="模块图标"
                                     align='center'>
                        <template slot-scope="scope">
                            <img style="width:40px;height:40px;"
                                 v-if="scope.row.funcIcon"
                                 :src="JSON.parse(scope.row.funcIcon).url"
                                 alt="">
                        </template>
                    </el-table-column>
                    <el-table-column prop="funcType"
                                     label="权限列表"
                                     align='center'>
                        <template slot-scope="scope">
                            <div class="tabtdHover"
                                 title="权限列表"
                                 @click="showQXList(scope)">权限列表</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     width="180"
                                     align='center'>
                        <template slot-scope="scope">
                            <el-button size="small"
                                       @click="compFunDialog = true;showFnAttr(scope.row)">功能属性设置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table ref="multipleTable"
                          :data="funPageObj.funList"
                          border
                          @select-all="selectFuncFn"
                          @select="selectFuncFn"
                          v-else
                          key="table2">
                    <el-table-column type="selection"
                                     align='center'></el-table-column>
                    <el-table-column prop="id"
                                     label="功能ID"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="name"
                                     label="功能名称"
                                     align='center'></el-table-column>
                    <el-table-column prop="funcInfo"
                                     label="功能描述"
                                     align='center'></el-table-column>
                    <el-table-column prop="funcType"
                                     label="功能模块类型"
                                     align='center' :formatter='funcFormatter'></el-table-column>
                    <el-table-column prop="funcType"
                                     label="权限列表"
                                     align='center'>
                        <template slot-scope="scope">
                            <div class="tabtdHover"
                                 title="权限列表"
                                 @click="showQXList(scope)">权限列表</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"
                     v-if="funPageObj.total">
                    <el-pagination @current-change="fnTabPage"
                                   layout="prev, pager, next"
                                   :total="funPageObj.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示"
                   :visible.sync="delVisible"
                   width="300px"
                   center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="delVisible = false;">取 消</el-button>
                <el-button type="primary"
                           @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!--企业属性-->
        <el-dialog :title="compAttrDialogTitle"
                   :visible.sync="compAttrDialog"
                   width="600px">
            <el-form ref="compAttrFrom"
                     :model="currentCompAttr"
                     label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业编号">
                            <el-input v-model="currentCompAttr.code"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="企业名称">
                            <el-input v-model="currentCompAttr.name"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="基本信息">
                            <el-input v-model="currentCompAttr.companyInfo"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="行业类型">
                            <el-input v-model="currentCompAttr.type"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="接口url">
                    <el-input v-model="currentCompAttr.url"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="compAttrDialog = false">取 消</el-button>
                <el-button type="primary"
                           @click="updateAppCompany">确 定</el-button>
            </span>
        </el-dialog>

        <!--功能属性-->
        <el-dialog title="功能属性"
                   :visible.sync="compFunDialog"
                   width="600px">
            <el-form ref="fnAttrForm"
                     :model="fnAttrObj"
                     label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="功能ID">
                            <el-input v-model="fnAttrObj.id"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="功能名称">
                            <el-input :disabled="true"
                                      v-model="fnAttrObj.functionsInfo.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="功能描述">
                            <el-input v-model="fnAttrObj.functionsInfo.funcInfo"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="功能类型">
                            <el-input v-model="fnAttrObj.functionsInfo.funcType"
                                      :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="功能别名">
                            <el-input v-model="fnAttrObj.nickname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示标志">
                            <el-radio-group v-model="fnAttrObj.flag">
                                <el-radio :label="0">是</el-radio>
                                <el-radio :label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="接口URL">
                            <el-input v-model="fnAttrObj.url"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="模块属性">
                            <el-select v-model="fnAttrObj.companyInfo"
                                       placeholder="请选择"
                                       style="width:100%;">
                                <el-option label="否"
                                           value="0"></el-option>
                                <el-option label="是"
                                           value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-form-item label="模块图标">
                    <el-upload class="upload-demo2"
                               :action="urlConfig.upload"
                               :on-exceed="fnAttrExceed"
                               :on-success="fnAttrSuccess"
                               :on-remove="fnAttrRemove"
                               accept="image/jpg,image/gif,image/png"
                               :limit='1'
                               list-type="picture"
                               :file-list="fnAttrFileList">
                        <el-button size="small"
                                   type="primary">点击上传</el-button>
                        <div slot="tip"
                             class="el-upload__tip">只能上传jpg/gif/png文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="compFunDialog = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveFnAttr">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 权限列表 -->
        <el-dialog title="权限列表"
                   :visible.sync="QXDialog"
                   width="90%">
            <div class="container">
                <div class="handle-box">
                    <el-button class="handSearchBut ml10"
                               type="primary"
                               icon="search"
                               @click="searchQX">搜索</el-button>
                    <el-input v-model="QXListPage.searchValue"
                              placeholder="筛选关键词"
                              class="handle-input mr10"
                              @keyup.enter.native="searchQX"></el-input>
                </div>
                <el-table :data="QXList"
                          border>
                    <el-table-column prop="id"
                                     label="权限ID"
                                     sortable
                                     align='center'></el-table-column>
                    <el-table-column prop="name"
                                     label="权限名称"
                                     align='center'></el-table-column>
                    <el-table-column prop="desc"
                                     label="权限描述"
                                     align='center'></el-table-column>
                </el-table>
                <div class="pagination"
                     v-if="QXListTotal">
                    <el-pagination @current-change="QXTabPage"
                                   layout="prev, pager, next"
                                   :total="QXListTotal">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
        <!-- 企业添加和删除弹框-->
        <el-dialog :title="companyObj.companyDialogTitle"
                   :visible.sync="companyObj.companyDialog"
                   width="90%">
            <compFunSet ref="compFunSet"
                        v-if="companyObj.companyDialog"
                        :appId="companyObj.appId"
                        :compAddOrDelete="companyObj.addOrDelet"
                        :closeFn="closeCompanyDialog"
                        :showCompAttrDialog="showCompAttrDialog"
                        :showCompFnDialog="showCompFnDialog"
                        :showCompBtn="showCompBtn"></compFunSet>
        </el-dialog>
    </div>
</template>

<script>
import compFunSet from './compFunSet'
export default {
    name: 'basetable',
    data () {
        var validateAppSize = (rule, value, callback) => {
            let reg = /^[0-9]+([.]{1}[0-9]+){0,1}$/
            if (value !== null & value !== '' && !reg.test(value)) {
                callback(new Error('APP文件大小只能为数字'));
            } else {
                callback();
            }
        };
        return {
            fileList: [], // 上传图片
            funcFileList: [], // 主要功能截图
            cur_page: 1, //  app 列表
            pageSize: 10, // app 列表每一列10条
            select_word: '', // 搜索关键字
            editVisible: false, // 编辑和添加app 弹框是否显示
            delVisible: false, //  删除app 提示框
            funVisible: false, //  添加和删除 功能 弹框
            compFunDialog: false, // 企业功能设置
            compAttrDialog: false, // 企业属性设置彈框
            showCompBtn: false, // 企业操作按钮显示
            currentCompAttr: {
                code: '', // 企业编号
                name: '', // 企业名称
                companyInfo: '', // 企业基本信息
                type: '', //行业类型
                id: '',// 企业id
                appid: '', // appid
                url: '' // 企业接口url
            },// 选中的当前企业属性对象
            form: { // 编辑和添加app 提交的表单数据
                appName: '',
                id: '',
                appVersion: '',
                appInfo: '',
                updateFlag: '',
                downloadUrl: '',
                qrCode: '',
                appSize: '',
                bussTypeId: 0,
                appUrl: '',
                url: []
            },
            rules: {
                appName: [
                    { required: true, message: '请输入app名称', trigger: 'blur' }
                ],
                appSize: [
                    { validator: validateAppSize, trigger: 'blur' }
                ]
            },
            dialogTitle: '添加APP信息',
            appList: [], // app 列表
            appTotal: 0, // app 总页数
            selectApp: [], // 选中的app
            inputDisabled: false, // false时是添加 true是修改
            funPageObj: { // 添加功能和查看功能的列表
                cur_page: 1,
                pageSize: 10,
                total: 0,
                select_word: '',
                funList: [],
                selectAppId: '',
                setFnText: '',
                addOrDelet: '', // 删除或添加功能
                funSelectArr: [] // 选中功能集合
            },
            companyObj: {
                companyDialog: false, // 显示企业弹框
                appId: '',
                companyDialogTitle: '',
                addOrDelet: '' // 添加或删除企业
            },
            currentAppName: '', // 当前点击的app名称
            compAttrDialogTitle: '', // 设置企业属性弹框的title
            fnAttrObj: { // 功能属性
                id: '',
                functionsInfo: {
                    name: '',
                    funcInfo: '',
                    funcType: ''
                },
                nickname: '',
                flag: '',
                url: ''
            },
            fnAttrFileList: [],
            QXList: [], // 权限集合
            QXListPage: { // 权限列表配置
                funcId: '',
                pageNo: 1,
                size: 10,
                searchValue: '',
                searchName: 'name'
            },
            QXDialog: false, // 权限列表 
            QXListTotal: 0, // 权限列表总条数
            selectAppCompId: '' // app里选中的企业id
        }
    },
    components: {
        compFunSet
    },
    created () {
        this.getData();
    },
    methods: {
        // 分页导航
        handleCurrentChange (val) {
            this.cur_page = val;
            this.getData();
        },
        searchApp () {
            // app 搜索
            this.cur_page = 1;
            this.getData();
        },
        getData () {
            // 获取app列表
            let sendData = {
                pageNo: this.cur_page,
                size: this.pageSize,
                searchName: 'app_name',
                searchValue: this.select_word
            }
            this.fetch(this.urlConfig.appList, sendData, 'get').then((response) => {
                if (response.code == 200) {
                    this.appList = response.data.records
                    this.appTotal = response.data.total
                } else {
                    this.$message.error(response.message);
                }
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        bussTypeFormatter (row, column, cellValue) {
            switch (cellValue) {
                case 0:
                    return '教育';
                    break;
                case 1:
                    return '管理';
                    break;
                case 2:
                    return '知识';
                    break;
                case 3:
                    return '其他';
                    break
                default:
                    return '';
            }
        },
        flagFormatter (row, column, cellValue) {
            switch (cellValue) {
                case 0:
                    return '否';
                    break;
                case 1:
                    return '是';
                    break;
                default:
                    return '';
            }
        },
        funcFormatter (row, column, cellValue) {
            switch (cellValue) {
                case 0:
                    return '哈哈';
                    break;
                default:
                    return '';
            }
        },
        toPageCompanyList (appId, appName, addOrDelete) {
            // 企业使用列表添加或删除
            this.companyObj.addOrDelet = addOrDelete
            this.companyObj.companyDialog = true
            this.companyObj.appId = appId
            this.companyObj.companyDialogTitle = `${appName} - 企业使用列表`

            this.currentAppName = appName

            this.funPageObj.cur_page = 1
            this.funPageObj.select_word = ''
            // this.funPageObj.addOrDelet = addOrDelete
            this.funPageObj.total = 0
            if (addOrDelete == 'add') {
                this.funPageObj.setFnText = `${appName} - 添加功能`
            } else {
                this.funPageObj.setFnText = `${appName} - 删除功能`
            }
            this.funPageObj.selectAppId = appId//  添加功能的app ID
        },
        closeCompanyDialog () {
            this.companyObj.companyDialog = false
        },
        addDialog () {
            //  点击添加app
            this.dialogTitle = '添加APP信息'
            this.editVisible = true;
            this.inputDisabled = false
            this.form = {
                appName: '',
                id: '',
                appVersion: '',
                appInfo: '',
                updateFlag: '',
                downloadUrl: '',
                qrCode: '',
                appSize: '',
                bussTypeId: 0,
                appUrl: ''
            }
        },
        handleEdit (index, row) {
            //  编辑app信息
            this.dialogTitle = '编辑APP信息'
            this.inputDisabled = true
            this.form = row
            if (row.appIcon) {
                this.fileList = [{ name: row.appIconName, url: row.appIcon }]
            }
            if (row.appFuncImage) {
                row.appFuncImage.split(',').forEach(item => {
                    this.funcFileList.push({
                        name: '',
                        url: item
                    })
                })
            }
            this.editVisible = true;
        },
        closeAppDialog () {
            // 关闭app 修改或添加弹框
            this.fileList = [];
            this.funcFileList = [];
        },
        handleDelete (index, row) {
            this.deleteId = row.id;
            this.delVisible = true;
        },
        // 保存编辑
        saveEdit () {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.inputDisabled) {
                        // 修改
                        this.modApp()
                    } else {
                        // 添加
                        this.addApp()
                    }
                }
            });
        },
        selectAppFn (value) {
            //  app勾选
            this.selectApp = value
        },
        // 确定删除
        deleteRow () {
            this.fetch(this.urlConfig.deleteApp, { id: this.deleteId }, 'get').then((response) => {
                this.getData()
                this.$message.success('删除成功');
                this.delVisible = false;
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        batchDeleteApp () {
            // 批量删除app
            this.$alert('您确定删除选中的APP吗？', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action === 'confirm') {
                        let sendData = {
                            ids: []
                        }
                        this.selectApp.forEach(item => {
                            sendData.ids.push(item.id)
                        })
                        this.fetch(this.urlConfig.batchDeleteApp, sendData, 'get').then((response) => {
                            if (response.code == 200) {
                                this.funVisible = false
                                this.getData()
                            }
                            this.$message.success(response.message);
                        }).catch(() => {

                        })
                    }
                }
            });
        },
        // 添加APP
        addApp () {
            let sendData = this.form
            if (this.fileList.length) {
                sendData.appIcon = this.fileList[0].response.data[0].url
                sendData.appIconName = this.fileList[0].response.data[0].name
                this.fileList = []
            }

            if (this.funcFileList.length) {
                sendData.appFuncImage = ''
                this.funcFileList.forEach((item, index) => {
                    if (index !== this.funcFileList.length - 1) {
                        sendData.appFuncImage += item.response.data[0].url + ','
                    } else {
                        sendData.appFuncImage += item.response.data[0].url
                    }
                })
                this.funcFileList = []
            }

            this.fetch(this.urlConfig.addApp, sendData, 'post').then((response) => {
                this.getData()
                this.editVisible = false;
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        // 修改 APP
        modApp () {
            debugger
            let sendData = this.form
            if (this.fileList.length > 0 && this.fileList[0].response) {
                sendData.appIcon = this.fileList[0].response.data[0].url
                sendData.appIconName = this.fileList[0].response.data[0].name
                this.fileList = []
            } else if (this.fileList.length == 0) {
                sendData.appIcon = ''
                sendData.appIconName = ''
            }

            if (this.funcFileList.length > 0) {
                sendData.appFuncImage = '';
                this.funcFileList.forEach((item, index) => {
                    if (item.url) {
                        sendData.appFuncImage += `${item.url},`
                    } else {
                        sendData.appFuncImage += `${item.response.data[0].url},`
                    }
                })
                sendData.appFuncImage = sendData.appFuncImage.substr(0, sendData.appFuncImage.length - 1)
                this.funcFileList = []
            } else {
                sendData.appFuncImage = ''
            }
            this.fetch(this.urlConfig.modApp, this.form, 'post').then((response) => {
                this.getData();
                this.editVisible = false;
                this.$message.success(`修改成功`);
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        handleexceed () {
            this.$message('最多只能上传一张图片');
        },
        funcHandleexceed () {
            this.$message('最多只能上传五张图片');
        },
        hanleRemove (response, file) {
            this.fileList = file
        },
        hanleSuccess (response, file, fileList) {
            // app 图标上传成功回调
            this.fileList = fileList
        },
        funcHanleRemove (response, file) {
            // app 主要功能图片删除图片
            this.funcFileList = file
        },
        funcHanleSuccess (response, file, fileList) {
            // app 主要功能图片上传图片
            this.funcFileList = fileList
        },
        closeFunVisible () {
            // 关闭功能列表弹框回调
            this.funPageObj.funSelectArr = []
            this.$refs.multipleTable.clearSelection();
        },
        addOrDeletFn (id, appName, addOrDelete) {
            this.funPageObj.cur_page = 1
            this.funPageObj.select_word = ''
            this.funPageObj.addOrDelet = addOrDelete
            this.funPageObj.total = 0
            if (addOrDelete == 'add') {
                this.funPageObj.setFnText = `${appName} - 添加功能`
                // this.funPageObj.setFnText = `${appName}`
            } else {
                this.funPageObj.setFnText = `${appName} - 删除功能`
                // this.funPageObj.setFnText = `${appName}`
            }
            this.funPageObj.selectAppId = id//  添加功能的app ID
            this.getFunctionList()
        },
        fnTabPage (curPage) {
            this.funPageObj.cur_page = curPage
            this.getFunctionList()
        },
        searchFn () {
            // 搜索功能
            this.funPageObj.cur_page = 1
            this.funPageObj.funSelectArr = []
            this.getFunctionList()
        },
        getFunctionList () {
            this.funVisible = true // 弹框
            let sendData
            let url
            if (this.showCompBtn) {
                if (this.funPageObj.addOrDelet == 'add') {
                    url = this.urlConfig.queryAppFn //  已有功能
                    sendData = {
                        appId: this.funPageObj.selectAppId,
                        searchValue: this.funPageObj.select_word, // 关键字搜索
                        pageNo: this.funPageObj.cur_page,
                        size: this.funPageObj.pageSize
                    }
                    this.fetch(url, sendData, 'get').then((response) => {
                        this.funPageObj.total = response.data.total
                        this.funPageObj.funList = response.data.records
                        if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                            this.$nextTick(() => {
                                this.funPageObj.funList.forEach((item, index) => {
                                    if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(JSON.stringify(item)) > -1) {
                                        this.$refs.multipleTable.toggleRowSelection(item, true);
                                    }
                                })
                            })
                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                } else {
                    let url = this.urlConfig.selectACFuncByACId //  已有功能
                    let sendData = {
                        acId: this.selectAppCompId,
                        searchValue: this.funPageObj.select_word, // 关键字搜索
                        pageNo: this.funPageObj.cur_page,
                        size: this.funPageObj.pageSize
                    }
                    this.fetch(url, sendData, 'get').then((response) => {
                        this.funPageObj.total = response.data.total
                        this.funPageObj.funList = response.data.records
                        if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                            this.$nextTick(() => {
                                this.funPageObj.funList.forEach((item, index) => {
                                    if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(item.id) > -1) {
                                        this.$refs.multipleTable.toggleRowSelection(item, true);
                                    }
                                })
                            })
                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            } else {
                if (this.funPageObj.addOrDelet == 'add') { // 添加功能
                    url = this.urlConfig.functionList // 所有功能
                    sendData = {
                        pageNo: this.funPageObj.cur_page,
                        size: this.funPageObj.pageSize,
                        searchName: 'name',
                        searchValue: this.funPageObj.select_word
                    }
                } else { // 删除功能
                    url = this.urlConfig.queryAppFn //  已有功能
                    sendData = {
                        appId: this.funPageObj.selectAppId,
                        searchValue: this.funPageObj.select_word, // 关键字搜索
                        pageNo: this.funPageObj.cur_page,
                        size: this.funPageObj.pageSize
                    }
                }
                this.fetch(url, sendData, 'get').then((response) => {
                    this.funPageObj.total = response.data.total
                    this.funPageObj.funList = response.data.records
                    if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                        this.$nextTick(() => {
                            this.funPageObj.funList.forEach((item, index) => {
                                if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(JSON.stringify(item)) > -1) {
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                                }
                            })
                        })
                    }
                }).catch((error) => {
                    console.log(error)
                })
            }
        },
        selectFuncFn (value, value1) {
            this.funPageObj.funSelectArr[this.funPageObj.cur_page] = value
        },
        insertOrDeleteFunc (fnType) {
            if (this.showCompBtn) {
                if (this.funPageObj.addOrDelet == 'add') {
                    let sendData = {
                        _ACId: this.selectAppCompId,
                        funcIds: []
                    }
                    this.funPageObj.funSelectArr.forEach(items => {
                        items.forEach(item => {
                            sendData.funcIds.push(item.id)
                        })
                    })
                    this.funPageObj.funSelectArr = []
                    this.fetch(this.urlConfig.insertACFunc, sendData, 'get').then((response) => {
                        if(response.code == 200){
                            this.funVisible = false
                        }
                        this.$message.success(response.message);
                    }).catch((error) => {
                        this.$message.error(error.message);
                    })
                } else {
                    var sendData = {
                        _ACfuncIds: []
                    }
                    this.funPageObj.funSelectArr.forEach(items => {
                        items.forEach(item => {
                            sendData._ACfuncIds.push(item.id)
                        })
                    })
                    this.fetch(this.urlConfig.deleteACFunc, sendData, 'get').then((response) => {
                        this.$message.success(response.message);
                        if (response.code == 200) {
                            return Promise.resolve()
                        }
                    }).then(() => {
                        let url = this.urlConfig.selectACFuncByACId //  已有功能
                        let sendData = {
                            acId: this.selectAppCompId,
                            searchValue: this.funPageObj.select_word, // 关键字搜索
                            pageNo: this.funPageObj.cur_page,
                            size: this.funPageObj.pageSize
                        }
                        this.fetch(url, sendData, 'get').then((response) => {
                            this.funPageObj.total = response.data.total
                            this.funPageObj.funList = response.data.records
                            if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                                this.$nextTick(() => {
                                    this.funPageObj.funList.forEach((item, index) => {
                                        if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(item.id) > -1) {
                                            this.$refs.multipleTable.toggleRowSelection(item, true);
                                        }
                                    })
                                })
                            }
                        }).catch((error) => {
                            console.log(error)
                        })
                    }).catch((error) => {
                        this.$message.error(error.message);
                    })
                }
            } else {
                // 添加或删除确认操作
                let sendData = {
                    appId: this.funPageObj.selectAppId,
                    funcIds: []
                }
                this.funPageObj.funSelectArr.forEach(items => {
                    items.forEach(item => {
                        sendData.funcIds.push(item.id)
                    })
                })
                this.funPageObj.funSelectArr = []
                let url
                if (this.funPageObj.addOrDelet == 'add') {
                    url = this.urlConfig.insertFunc
                    this.fetch(url, sendData, 'get').then((response) => {
                        if (response.code == 200) {
                            this.funVisible = false
                        }
                        this.$message.success(response.message);
                    }).catch(() => {

                    })
                } else {
                    url = this.urlConfig.deleteFunc
                    this.$alert('您确定删除选中的功能吗？', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            if (action === 'confirm') {
                                this.fetch(url, sendData, 'get').then((response) => {
                                    if (response.code == 200) {
                                        this.funVisible = false
                                    }
                                    this.$message.success(response.message);
                                }).catch(() => {

                                })
                            }
                        }
                    });
                }
            }
        },
        showCompAttrDialog (compAttrObj, compId) {
            //显示企业属性弹框
            this.currentCompAttr.code = compAttrObj.company.code
            this.currentCompAttr.name = compAttrObj.company.name
            this.currentCompAttr.companyInfo = compAttrObj.company.companyInfo
            this.currentCompAttr.type = compAttrObj.company.type
            this.currentCompAttr.id = compAttrObj.id
            this.currentCompAttr.appid = compAttrObj.appid
            this.currentCompAttr.url = compAttrObj.url
            this.compAttrDialog = true
            this.compAttrDialogTitle = `${this.currentAppName} - ${compAttrObj.company.name}企业 - 属性`
        },
        showCompFnDialog (compName, addOrDelete, selectAppCompId) {
            // 显示企业功能弹框
            this.funVisible = true
            this.funPageObj.addOrDelet = addOrDelete
            if (addOrDelete == 'add') {
                this.funPageObj.setFnText = `${this.currentAppName} - ${compName}企业 - 添加功能`
                // this.funPageObj.setFnText = `${this.currentAppName} - ${compName}企业`
            } else {
                this.funPageObj.setFnText = `${this.currentAppName} - ${compName}企业 - 删除功能`
                // this.funPageObj.setFnText = `${this.currentAppName} - ${compName}企业`
            }

            if (this.showCompBtn && addOrDelete == 'add') {
                this.selectAppCompId = selectAppCompId
                let url = this.urlConfig.queryAppFn //  已有功能
                let sendData = {
                    appId: this.companyObj.appId,
                    searchValue: this.funPageObj.select_word, // 关键字搜索
                    pageNo: this.funPageObj.cur_page,
                    size: this.funPageObj.pageSize
                }
                this.fetch(url, sendData, 'get').then((response) => {
                    this.funPageObj.total = response.data.total
                    this.funPageObj.funList = response.data.records
                    if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                        this.$nextTick(() => {
                            this.funPageObj.funList.forEach((item, index) => {
                                if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(item.id) > -1) {
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                                }
                            })
                        })
                    }
                }).catch((error) => {
                    console.log(error)
                })
            } else if (this.showCompBtn && addOrDelete != 'add') {
                this.selectAppCompId = selectAppCompId
                let url = this.urlConfig.selectACFuncByACId //  已有功能
                let sendData = {
                    acId: this.selectAppCompId,
                    searchValue: this.funPageObj.select_word, // 关键字搜索
                    pageNo: this.funPageObj.cur_page,
                    size: this.funPageObj.pageSize
                }
                this.fetch(url, sendData, 'get').then((response) => {
                    this.funPageObj.total = response.data.total
                    this.funPageObj.funList = response.data.records
                    if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                        this.$nextTick(() => {
                            this.funPageObj.funList.forEach((item, index) => {
                                if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(item.id) > -1) {
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                                }
                            })
                        })
                    }
                }).catch((error) => {
                    console.log(error)
                })
            }
        },
        fnAttrExceed () {
            // 功能模块图标上传	文件超出个数限制时的钩子
            this.$message('最多只能上传一张图片');
        },
        fnAttrSuccess (file) {
            // 功能模块图标上传	成功回调
            console.log(file)
            this.fnAttrFileList = file.data
        },
        fnAttrRemove (file) {
            // 功能模块图标上传	删除回调
            this.fnAttrFileList = file.data
        },
        updateAppCompany () {
            let sendData = {
                id: this.currentCompAttr.id,//
                appid: this.currentCompAttr.appid,//appid
                url: this.currentCompAttr.url // 企业接口url
            }
            this.fetch(this.urlConfig.updateAppCompany, sendData, 'get').then((response) => {
                if (response.code == 200) {
                    this.compAttrDialog = false
                    this.$message.success(response.message);
                    this.currentCompAttr = {}
                    this.$refs.compFunSet.getCompList() // 调用子组件方法
                } else {
                    this.$message.error(response.message);
                }
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        showQXList (data) {
            this.QXDialog = true
            this.QXListPage.funcId = data.row.id
            this.getQXList()
        },
        searchQX () {
            // 搜索权限
            this.QXListPage.pageNo = 1;
            this.getQXList()
        },
        QXTabPage (curPage) {
            // 权限列表分页切换
            this.QXListPage.pageNo = curPage
            this.getQXList()
        },
        getQXList () {
            // 获取权限列表
            this.fetch(this.urlConfig.selectAuthorithListByFuncId, this.QXListPage, 'get').then((response) => {
                if (response.code != 200) {
                    this.$message.error(response.message);
                } else {
                    this.QXList = response.data.records
                    this.QXListTotal = response.data.total
                }
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        showFnAttr (rowData) {
            this.fnAttrObj = rowData
            if (rowData.funcIcon) {
                this.fnAttrFileList = [JSON.parse(rowData.funcIcon)]
            } else {
                this.fnAttrFileList = []
            }
        },
        saveFnAttr () {
            let sendData = {
                id: this.fnAttrObj.id,
                nickname: this.fnAttrObj.nickname,
                flag: this.fnAttrObj.flag,
                url: this.fnAttrObj.url,
                funcIcon: ''
            }
            console.log(this.fnAttrFileList)
            sendData.funcIcon = this.fnAttrFileList ? JSON.stringify(this.fnAttrFileList[0]) : ''
            // 保存功能属性
            this.fetch(this.urlConfig.updateACFunc, sendData, 'post').then((response) => {
                if (response.code == 200) {
                    this.$message.success(response.message)
                    this.compFunDialog = false
                    return Promise.resolve()
                } else {
                    return Promise.reject(response)
                }
            }).then(() => {
                let url = this.urlConfig.selectACFuncByACId //  已有功能
                let sendData = {
                    acId: this.selectAppCompId,
                    searchValue: this.funPageObj.select_word, // 关键字搜索
                    pageNo: this.funPageObj.cur_page,
                    size: this.funPageObj.pageSize
                }
                this.fetch(url, sendData, 'get').then((response) => {
                    this.funPageObj.total = response.data.total
                    this.funPageObj.funList = response.data.records
                    if (this.funPageObj.funSelectArr[this.funPageObj.cur_page]) {
                        this.$nextTick(() => {
                            this.funPageObj.funList.forEach((item, index) => {
                                if (JSON.stringify(this.funPageObj.funSelectArr[this.funPageObj.cur_page]).indexOf(item.id) > -1) {
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                                }
                            })
                        })
                    }
                }).catch((error) => {
                    console.log(error)
                })
            }).catch((error) => {
                this.$message.error(error.message);
            })
        }
    }
}

</script>

<style scoped>
.ml10 {
    margin-left: 10px;
}
.handle-box {
    margin-bottom: 20px;
    overflow: hidden;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
    float: right;
}
.handSearchBut {
    float: right;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
<style>
/* .app-list table {
    table-layout: initial;
}
.app-list .el-table th > .cell {
    white-space: nowrap;
} */
.funcImg .el-upload-list {
    display: flex;
}
.funcImg .el-upload-list li {
    margin-right: 10px;
    width: 120px;
}
.funcImg .el-upload-list li:last-child {
    margin-right: 0;
}
</style>

